<template>
  <Layout>
    <div data-v-2a0eef53="" class="journal">
      <div data-v-2a0eef53="" class="container journal-container">
        <div data-v-2a0eef53="" class="journal-header">
          <h1 data-v-2a0eef53="" class="journal-title">
            {{journal.title}}
          </h1>
          <div data-v-2a0eef53="" class="journal-meta">
            <div data-v-2a0eef53="" class="journal-author">
              <span data-v-2a0eef53="" class="label">Author</span
              ><span data-v-2a0eef53="" class="author-name"
                >{{journal.author}}</span
              >
            </div>
            <div data-v-2a0eef53="" class="journal-date">
              <span data-v-2a0eef53="" class="label">Date</span>
              <div data-v-2a0eef53="">{{journal.created_at}}</div>
            </div>
            <div data-v-2a0eef53="" class="journal-time">
              <span data-v-2a0eef53="" class="label">Time</span
              ><span data-v-2a0eef53="">{{journal.time}}</span>
            </div>
          </div>
        </div>
        <div data-v-2a0eef53="" class="journal-content" v-html="mdToHtml(journal.content)">
        </div>
      </div>
    </div>
  </Layout>
</template>
<page-query>
query($name: String){
  journal:allStrapiJournal(filter:{name: {eq:$name}}) {
    edges{
      node{
        id
        name
        title
        subtitle
        author
        created_at(format: "YMD")
        time
        content
      }
    }
  }
}
</page-query>

<script>
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()

export default {
  name: "JournalPostPage",
  metaInfo() {
    return {
      title: "JournalPage",
    };
  },
  computed: {
    journal() {
      return this.$page.journal.edges[0].node
    }
  },
  methods: {
    mdToHtml(markdown) {
      return md.render(markdown).replace('/uploads', process.env.GRIDSOME_STRAPI_URL + '/uploads')
    }
  }
};
</script>

<style>
</style>